<template>
  <section>
    <el-table 
    	 v-loading="loading"
        :data="tableData" 
        stripe 
        style="width: 100%"
        :header-cell-style="{background:'#cae4fe',color: '#000'}"
        :cell-style="{border:'none'}"
        >
        <el-table-column label="序号" align="center" width="80px">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{Number(scope.$index)+1}}</span>
            </template>
        </el-table-column>
        <el-table-column
        v-for="(val,key) in tableTitle"
        :prop="key"
        :label="val"
        width="180"
        :sortable="val=='创建时间'"
        align="center"
        :key="key"
        :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
               <span class="button-click" @click="detail(scope)" ><img src="../../../images/server03.png"/></span>
               <span class="button-click" @click="updata(scope)" ><img src="../../../images/server02.png"/></span>
               <span class="button-click" @click="del(scope)"  ><img src="../../../images/server04.png"/></span>
            </template>
        </el-table-column>
    </el-table>
    <p style="margin-top: 15px;">
      <el-pagination
        background=""
        @current-change="handleCurrentChange"
        :current-page.sync ="pageNo" 
        layout="prev, pager, next"
        :total="pageTotal"
      ></el-pagination>
    </p>
  </section>
</template>

<script>
export default {
  props: {
    tableTitle: Object,
    tableData: Array,
    pageTotal: Number,
    loading:Boolean,
    pageNo:Number
  },
  data() {
    return {};
  },
  methods: {
    detail(scope) {
      this.$emit("detail", scope);
    },
    updata(scope) {
      this.$emit("updata", scope);
    },
    del(scope) {
      console.log(scope);
      this.$emit("del", scope);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
      console.log(val)
    }
  }
};
</script>

<style scoped="scoped">
    .button-click{
        margin-left: 10px;
        cursor: pointer;
    }
</style>